<template>
  <view class="rh relative">
    <!--筛选头部-->
    <view class="flex px-4 bg-gray-100 h-10" v-if="screenList.length">
      <slot name="screenTitle"></slot>
      <view v-for="item in screenList" :class="item.className">
        <view class="flex items-center" v-if="item?.type == 'select' " @click="handleDrop(item.key)">
          {{ item.name }}
          <image class="w-4 h-4 ml-1" src="@/static/image/drop.png"></image>
        </view>
        <text v-else>{{ item.name }}</text>
      </view>

    </view>

    <!--hidden-->
    <view class="hidden px-4 box-border w-full bg-white top-2.5" :class="dropFlag ? 'dropShow' : ''">

      <view class="flex justify-between items-center border-bottom" v-for="(item, index) in menuList" :key="index" @click="handleSelect(item)">


        <view class="w-full">
          <!--前置筛选条件-->
          <view v-if="item.slotName == 'before-sift'">
            <slot name="before-sift"></slot>
          </view>

          <!--v-else-if="!item.slotName"-->
            <view class="w-full flex justify-between items-center border-bottom" v-if="menuList.length > 1">
              <view class="text-slate-600 text-sm py-3 ">{{ item.menuName }}</view>
              <view v-if="item.value == curScreenVal">
                <image class="w-5 h-5" src="@/static/image/selected.png"></image>
              </view>

            </view>
          <!--后置筛选条件  -->
          <view v-if="item.slotName == 'after-sift'">
            <slot name="after-sift"></slot>
          </view>
        </view>

      </view>

      <view class="flex items-center" v-if="curScreenVal == '99'">
        <view class="w-24 text-slate-600 text-sm py-3">选择日期</view>

        <view class="flex flex-1 items-center">
          <picker mode="date" class="h-14 w-full flex items-center" :value="customizeTime" @change="changeTime">
            <view class="uni-input ">{{ customizeTime }}</view>
          </picker>
          <image class="w-4 h-4" src="@/static/image/rt.png"></image>
        </view>
      </view>

    </view>

    <!--class="px-4 box-border"  -->
    <view class="relative" :class="screenList.length ? 'mkht' : 'h-full'">
      <scroll-view class="h-full" scroll-y @scrolltolower="handleScrollTolower">
        <view v-for="(item, index) in dataSource" :key="index">
            <slot name="mainList" v-bind="item"></slot>
        </view>
      </scroll-view>


      <view :class="dropFlag ? 'maskShow' : ''" @click="dropFlag = false"></view>
    </view>
    <!--:value="date" :start="startDate" :end="endDate" @change="bindDateChange"-->
    <!--<picker mode="date" class="h-10">-->
      <!--<view class="uni-input">{{date}}</view>-->
    <!--</picker>-->

  </view>
</template>

<script setup lang="ts">
    import { ref, computed } from 'vue'
    const emit = defineEmits(['scrollBottom', 'selectedTerm'])
    let props = defineProps({
      screenList: { // 筛选头
        type: Array as any,
        default: () => []
      },
      dropDownMenuList: { // 下拉子项
        type: Object as any,
        default: () => []
      },
      dataSource: { // 数据源
        type: Array as any,
        default: []
      }
    })

    const menuKey = ref('')
    const dropFlag = ref(false) /** 是否选择下拉 **/
    const handleDrop = (key) => {
          menuKey.value = key
          dropFlag.value = !dropFlag.value
    }

    /** 关闭下拉 **/
    const closeDrop = () => {
      dropFlag.value = false
    }

    const menuList = computed(() => {
      return props.dropDownMenuList[menuKey.value]
    })

    const customizeTime = ref('') /** 自定义时间 **/
    const changeTime = (e) => {
        customizeTime.value = e.detail.value;
        console.log(customizeTime)
    }

    const curScreenVal = ref<string>('')  /** 当前选择的筛选下拉条件 **/
    const handleSelect = (item:any) => {
      // console.log(item)
      /** 抛出选中的筛选条件 **/
      const searchTerm = { ...item, ...{ menuKey: menuKey.value } }
      emit('selectedTerm', searchTerm)

      curScreenVal.value = String(item.value);
      // if(val == 99) {
      //   dropFlag.value = true;
      //   return
      // }
      // dropFlag.value = false;
    }

    /** 滚动到底部 **/
    const handleScrollTolower = () => {
      // console.log('滚动到底部')
      emit('scrollBottom')
    }

    defineExpose({
      handleDrop,
      closeDrop
    })

</script>

<style scoped lang="scss">
.rh {
  height: calc(100vh - 13.5rem);
}

.mkht {
  height: calc(100% - 2.5rem);
  //height: 100%;
}

.dropShow {
  display: block;
  position: absolute;
  top: 2.5rem;
  z-index: 99;
}

.maskShow {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
}
</style>
